#{extends 'main.html' /}
#{set title:'Compare Submissions' /}

<script type="text/javascript">
var submission_1, submission_2;

function update_assignments(id) {
	courseId = $('#course_'+id+' :selected').val();
	if (courseId == 0)
		return;
	$.post('/ajax/getassignments?courseId=' + courseId,
			function(assignments) {
				str = '';
				str += '<select id="assignment_'+id+'" onchange="view_submissions('+id+');"><option value=0>Select assignment</option>';
				$(assignments).each(function() {
					str += '<option value='+this.id+'>'+this.title+'</option>';
				});
				str += '</select><div id="submissions_'+id+'"></div>';
				$('#assignments_'+id).html(str);
			});
}
function view_submissions(id) {
	assignmentId = $('#assignment_'+id+' :selected').val();
	if (assignmentId == 0)
		return;
	$.post('/ajax/getsubmissions?assignmentId='+assignmentId,
			function(submissions) {
				str = '<ul>';
				$(submissions).each(function() {
					subId = this.id;
					str += '<li>Submission by: '+this.student.username+'<br />Files:<ul>';
						$(this.files).each(function() {
							md5_hash = md5Hash(this);
							str += '<li id="'+subId+'.'+md5_hash+'" onclick="choose_submission(this, '+id+');" class="clickable submissions_'+id+'">'+this+'</li>';
						});
					str += '</ul></li>';
				});
				str += '</ul>';
				$('#submissions_'+id).html(str);
			});
	
}

function choose_submission(item, id) {
	$('.submissions_'+id).each(function() {
		$(this).removeClass('chosen');
	});
	if (id == 1) {
		submission_1 = item.id;
	} else {
		submission_2 = item.id;
	}
	$(item).addClass('chosen');
}
</script>
<div class="comparison_view">
	<select id="course_1" onchange="update_assignments(1);">
		<option value=0>Select course</option>
	#{list courses}
		<option value=${_.id}>${_.code} ${_.title}</option>
	#{/list}
	</select>
	<div id="assignments_1"></div>
</div>

<div class="comparison_view">
	<select id="course_2" onchange="update_assignments(2);">
		<option value=0>Select course</option>
	#{list courses}
		<option value=${_.id}>${_.code} ${_.title}</option>
	#{/list}
	</select>
	<div id="assignments_2"></div>
</div>
<br style="clear:both;" />
<a href="javascript:compareSubmissions(submission_1, submission_2);">Compare selected files!</a>
<pre id="comparisonPre"></pre>